<template>
    <div class="app-container">
        <div class="adminSearchBox">
            <div class="adminSearchTop">
                <div class="adminSearchLeft">
                    <Search style="width: 1em; height: 1em; margin-right: 8px" />
                    <div>筛选搜索</div>
                </div>
                <div class="adminSearchRight">
                    <el-button @click="reset">重置</el-button>
                    <el-button type="primary" @click="queryList">查询搜索</el-button>
                </div>
            </div>
            <div class="parentSearchBox">
                <div class="adminSearch">
                    <span> 广告名称：</span>
                    <el-input size="default" v-model="adminSearchVal.name" placeholder="请输广告名称" />
                </div>
                <div class="adminSearch">
                    <span> 广告位置：</span>
                    <!-- <el-input size="default" v-model="adminSearchVal.keyword" placeholder="全部" /> -->
                    <el-select v-model="adminSearchVal.type" class="m-2" placeholder="请选择" size="default"
                        @change="selectChange">
                        <el-option v-for="item in options" :key="item.type" :label="item.label" :value="item.type" />
                    </el-select>
                </div>

            </div>
        </div>
        <div class="dataListBox">
            <div class="TicketsLeft">
                <Tickets style="width: 1em; height: 1em; margin-right: 8px" />
                <div>数据列表</div>
            </div>
            <el-button type="primary" @click="addFn" v-permission="'addUser'">添加</el-button>

        </div>
        <!-- --------------------------------------------- -->
        <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" style="text-align: center;" />
            <el-table-column prop="id" label="编号" />
            <el-table-column prop="name" label="优惠券名称" />

            <!-- <el-table-column prop="type" width="200px" label="优惠券类型">
            </el-table-column> -->
            <el-table-column label="优惠券类型">
                <template #default="{ row }">
                    {{ row.type == 0 ? '全场赠券' : row.type == 1 ? '会员赠券' : row.type == 2 ? '购物赠券' : row.type == 3 ? '注册赠券' :
                        ''
                    }}
                </template>
            </el-table-column>
            <el-table-column label="可使用商品">
                <template #default="{ row }">
                    {{ row.useType == 0 ? '全场通用' : row.useType == 1 ? '指定分类' : '指定商品'
                    }}
                </template>
            </el-table-column>
            <!-- 
            <el-table-column prop="minPoint" label="使用门槛" width="100px" /> -->
            <el-table-column label="使用门槛">
                <template #default="{ row }">
                    满 {{ row.minPoint }}可用
                </template>
            </el-table-column>
            <el-table-column label="面值" width="100px">
                <template #default="scoped">
                    {{ scoped.row.amount }}元
                </template>
            </el-table-column>
            <el-table-column label="使用平台" width="100px">
                <template #default="scoped">
                    {{ scoped.row.platform == 0 ? '全平台' : scoped.row.platform == 1 ? '移动平台' : 'PC平台' }}
                </template>
            </el-table-column>
            <!-- 
            <el-table-column prop="platform" label="使用平台" width="100px" /> -->
            <el-table-column label="有效期">
                <template #default="scoped">
                    <div>
                        开始时间： {{ dayjs(scoped.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
                    </div>
                    <div>
                        到期时间： {{ dayjs(scoped.row.endTime).format('YYYY-MM-DD HH:mm:ss') }}

                    </div>

                </template>
            </el-table-column>
            <el-table-column prop="orderCount" label="状态">
                已过期
            </el-table-column>

            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button link type="primary" size="small" @click="viewFn(row)">查看</el-button>
                    <el-button link type="primary" size="small" @click="editFn(row)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="deleteFn(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


        <!-- ------------批量------------- -->
        <div class="advertiseFoot">
            <!-- 分页 -->
            <el-pagination v-model:current-page="paginationParams.pageNum" v-model:page-size="paginationParams.pageSize"
                :page-sizes="[5, 10, 15]" layout="total, sizes, prev, pager, next, jumper" :total="paginationParams.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />

        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import * as http from '@/request/http';
import { ElMessage, ElMessageBox, dayjs } from 'element-plus';
import { useRouter } from 'vue-router';
import useTable from '@/hooks/components/useTable'
// import useSwitchStatus from "@/hooks/components/useSwitchStatus"
import { Search, Tickets } from '@element-plus/icons-vue'
const router = useRouter()
const adminSearchVal = reactive({
    name: '',
    type: ''
})
const selectChange = () => {
}
const handleSelectionChange = () => {
}
const options = [
    {
        type: '0',
        label: '全场赠券',
    },
    {
        type: '1',
        label: '会员赠券',
    },
    {
        type: '2',
        label: '购物赠券',
    },
    {
        type: '3',
        label: '注册赠券',
    }
]

const { tableData, paginationParams, handleSizeChange, handleCurrentChange, queryList } = useTable(http.coupon.getCouponList, adminSearchVal)
const reset = () => {
    adminSearchVal.type = ''
    adminSearchVal.name = ''
}

const addFn = () => {
    router.push(`updateCoupon`)
}
const viewFn = (row: MyCouponList) => {
    router.push(`couponHistory?id=${row.id}`)
}
const editFn = (row: MyCouponList) => {
    router.push(`updateCoupon?id=${row.id}`)
}
const deleteFn = (id: number) => {
    ElMessageBox.confirm(
        '是否要删除该数据 ? ',
        '提示',
        {
            cancelButtonText: '取消',
            confirmButtonText: '确认',
            type: 'warning',
        }).then(() => {
            http.coupon.CouponListDelete(id).then(res => {
                if (res.code == 200) {
                    ElMessage.success('删除成功');
                    queryList()
                } else {
                    ElMessage.error('删除失败')
                }
            })
        }).catch(() => {
            ElMessage.success('已取消操作')
        })
}



</script>

<style scoped>
.parentSearchBox {
    display: flex;
    padding: 5px;
}

.adminSearchBox {
    margin-top: 40px;
    padding: 20px;
    height: 90px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

    .adminSearchTop {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .adminSearchLeft {

            display: flex;
            align-items: center;
        }
    }
}

.adminSearch {
    padding-left: 50px;
    padding-top: 20px;
    margin-right: 40px;

    .el-input {
        width: 190px;
    }
}

.dataListBox {
    display: flex;
    justify-content: space-between;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    margin: 20px 0;
    padding: 14px;

    .TicketsLeft {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

}

.img-box {
    margin: auto;
    min-width: 80px;
    text-align: center;
}

.advertiseImg {
    width: 80px;
    height: 80px;
}

.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.advertiseFoot {

    margin-top: 20px;
    padding-bottom: 10px;
    display: flex;
    justify-content: flex-end;
}

.allDelVal {
    margin-right: 20px;
}

:deep(.cell) {
    text-align: center;
}
</style>